/** @format */

import { ErrorComputer } from '@icon-park/react'
import { useLocation, useRouter } from '@tanstack/react-router'
import type { MenuProps } from 'antd'
import { Layout, Menu } from 'antd'
import React from 'react'

const { Sider } = Layout

const siderStyle: React.CSSProperties = {
  overflow: 'auto',
  height: '100vh',
  position: 'sticky',
  insetInlineStart: 0,
  top: 0,
  bottom: 0,
  scrollbarWidth: 'thin',
  scrollbarGutter: 'stable',
}

const menuItems: MenuProps['items'] = [
  {
    key: '/error',
    label: '错误采集',
    icon: <ErrorComputer />,
  },
]
const Navbar = () => {
  const router = useRouter()
  const { pathname } = useLocation()

  function onSelect(key: string) {
    router.navigate({ to: key })
  }
  return (
    <>
      <Sider style={siderStyle}>
        <Menu theme="dark" mode="inline" defaultSelectedKeys={[pathname]} items={menuItems} onSelect={(e) => onSelect(e.key)} />
      </Sider>
    </>
  )
}

export default Navbar
